import React, { useEffect, useState } from 'react';
import Web3 from 'web3';
import { useParams, Link } from 'react-router-dom';

import UserListABI from '../contract/ABIs/UserList.json'; // 用户列表合约 ABI
import MarketplaceABI from '../contract/ABIs/Marketplace.json'; // 用户列表合约 ABI
import UserABI from '../contract/ABIs/User.json'; // 用户合约 ABI
import MaterialListAddr from '../contract/ADDRESSes/MaterialListAddr';
import UserListAddr from '../contract/ADDRESSes/UserListAddr';
import './transactionHistory.css'; // 添加样式文件

const TransactionHistory = () => {
    // 使用 useParams 获取路由参数中的地址信息
    const { userAddr } = useParams();
    const [Transactions, setTransactions] = useState([]);


    const web3 = new Web3(window.ethereum);
    const marketplaceContract = new web3.eth.Contract(MarketplaceABI, MaterialListAddr);

    useEffect(() => {
        const fetchTransactions = async () => {
            const accounts = await web3.eth.requestAccounts();
            const TransactionHistoryList = await marketplaceContract.methods.viewTransactionHistory().call({ from: accounts[0] });
            // console.log("TransactionHistory: ", TransactionHistory);
            const transactions = [];
            for (const TransactionHistory of TransactionHistoryList) {
                const product = await marketplaceContract.methods.products(Number(TransactionHistory.productId)).call();
                // console.log("Product: ", product);
                const transaction = {
                    transactionId: Number(TransactionHistory.transactionId),
                    productId: Number(TransactionHistory.productId),
                    name: product.name,
                    price: Number(product.price),
                    ipfsHash: product.ipfsHash,
                    timestamp: Number(TransactionHistory.timestamp),
                    quantity: Number(TransactionHistory.quantity),
                }
                console.log("transaction: ", transaction);
                transactions.push(transaction);
            }
            console.log("transactions: ", transactions);
            setTransactions(transactions);
            console.log("transactions123123: ", Transactions);
        };
        fetchTransactions();
    }, [userAddr]);

    return (
        <div className="transaction-history-container">
            <h2 className="page-title">交易历史</h2>
            <div className="transactions-list">
                {Transactions.map((transaction, index) => (
                    <div key={index} className="transaction-item">
                        <div className="transaction-details">
                            <h3 className="transaction-name">{transaction.name}</h3>
                            <p className="transaction-quantity">购买数量: {transaction.quantity}</p>
                            <p className="transaction-timestamp">时间: {new Date(transaction.timestamp * 1000).toLocaleString()}</p>
                        </div>
                        <div className="transaction-image">
                            <img src={`https://ipfs.infura.io/ipfs/${transaction.ipfsHash}`} alt={transaction.name} />
                        </div>
                        <div className="transaction-actions">
                            <Link to={`/index1/${userAddr}/SubmitReview/${transaction.productId}/mai1`} className="review-button">商品评价</Link>
                        </div>
                        <div className="transaction-actions">
                            <Link to={`/index1/${userAddr}/ProductReport/${transaction.productId}`} className="review-button">举报</Link>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default TransactionHistory;